<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<html>
<title></title>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="bg">
<div class="screen">
<span class="shadow"></span>
<img class="heart" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/85486/HEART.png">
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div>
<h2 class="bpm one">67 BPM</h2>
</div>
<div class="watch">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/85486/red-watch.png">
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
.bg {
display: flex;
position: absolute;
height: 100%;
width: 100%;
background: #fab49b;
justify-content: space-around;
color: #fff;
}
.watch {
position: absolute;
top: 50%;
transform: translateX(-21.15%) translateY(-49.75%);
}
.screen {
transform: scale(0.4);
width: 272px;
height: 340px;
margin: auto;
position: relative;
position: relative;
flex-direction: column;
background: #9e243e;
}
.heart {
margin: 0 auto;
display: block;
position: absolute;
top: 120px;
left: 0;
right: 0;
width: 66%;
opacity: 0.95;
animation: beat 1.2s ease-in-out infinite forwards;
}
.bpm {
font-size: 40px;
letter-spacing: 0.1em;
font-family: rift-soft, sans-serif;
color: #ffe1dd;
opacity: 1;
z-index: 100;
position: relative;
text-align: center;
top: 55px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
.shadow {
width: 20px;
height: 20px;
margin: -10px 0 0 -10px;
top: 50%;
left: 50%;
border-radius: 100px;
box-shadow: 0 0 200px 60px rgba(70, 0, 44, 0.6);
position: absolute;
z-index: 0;
animation: beat-shadow 1.2s ease-in-out infinite forwards;
}
.tick {
width: 10px;
height: 10px;
background: #ff6c5e;
opacity: 0.6;
border-radius: 100%;
position: absolute;
transition: all 0.3s ease-out;
&:nth-of-type(1) {
top: 20px;
left: 126px;
animation: tock 12s ease-out 0s infinite forwards;
}
&:nth-of-type(2) {
top: 50px;
right: 60px;
animation: tock 12s ease-out 1s infinite forwards;
}
&:nth-of-type(3) {
top: 100px;
right: 25px;
animation: tock 12s ease-out 2s infinite forwards;
}
&:nth-of-type(4) {
top: 165px;
right: 10px;
animation: tock 12s ease-out 3s infinite forwards;
}
&:nth-of-type(5) {
bottom: 90px;
right: 25px;
animation: tock 12s ease-out 4s infinite forwards;
}
&:nth-of-type(6) {
bottom: 45px;
right: 60px;
animation: tock 12s ease-out 5s infinite forwards;
}
&:nth-of-type(7) {
bottom: 20px;
right: 126px;
opacity: 1;
background: #ffd0cb;
// animation: tock 12s ease-out 6s infinite forwards;
}
&:nth-of-type(8) {
bottom: 45px;
left: 60px;
animation: tock 12s ease-out 7s infinite forwards;
}
&:nth-of-type(9) {
bottom: 90px;
left: 25px;
animation: tock 12s ease-out 8s infinite forwards;
}
&:nth-of-type(10) {
top: 165px;
left: 10px;
animation: tock 12s ease-out 9s infinite forwards;
}
&:nth-of-type(11) {
top: 100px;
left: 25px;
animation: tock 12s ease-out 10s infinite forwards;
}
&:nth-of-type(12) {
top: 50px;
left: 60px;
animation: tock 12s ease-out 11s infinite forwards;
}
&:nth-of-type(1),
&:nth-of-type(4),
&:nth-of-type(7),
&:nth-of-type(10) {
width: 20px;
height: 20px;
}
}
@keyframes beat {
0%,
100% {
transform: scale3d(1, 1, 1);
}
15%,
45% {
transform: scale3d(1.225, 1.225, 1);
}
35% {
transform: scale3d(1.15, 1.15, 1);
}
65% {
transform: scale3d(1, 1, 1);
}
}
@keyframes beat-shadow {
0%,
100% {
transform: scale3d(1, 1, 1);
}
15%,
45% {
transform: scale3d(1.1, 1.1, 1);
}
30%,
60% {
transform: scale3d(1, 1, 1);
}
}
@keyframes tock {
0%, 2% {
opacity: 0.95;
background: #ffd0cb;
}
10%, 100% {
opacity: 0.6;
background: #ff6c5e;
}
}
